<template>
  <el-row>
    <el-col >
      <aigc-card class="w-full" header="true" footer="true">
        <template #header>
          <span>余额管理</span>
        </template>
        <div class="w-full">
          <el-statistic :value="money" class="">
            <template #prefix>
              <el-icon>
                <svg-icon icon-name="icon-yue"> </svg-icon>
              </el-icon>
            </template>
            <template #suffix> ￥ </template>
            <template #title> 余额 </template>
            <!-- {{ money }} -->
          </el-statistic>
        </div>
        <template #footer>
          <div class="flex justify-center">
            <el-button type="primary" @click="topUpClick"> 充值 </el-button>
          </div>
        </template>
      </aigc-card>
    </el-col>
  </el-row>

  <upto ref="uptoInstance" @refish-money="setMoney"></upto>
</template>
<script setup lang="ts">
import { ref } from "vue";
import AigcCard from '@/components/aigcCard'
import upto from "./upto";
const uptoInstance = ref();

const money = ref<number>(0);
const topUpClick = () => {
  uptoInstance.value.openDialog(true);
};
const setMoney = (num: number) => {
  //todo 等到充值成功回调sdk充值接口获取最新余额
  money.value+= +num;
};
</script>
<style lang="scss" scoped>
::v-deep(.el-input__wrapper) {
  padding-right: 0px;
}
::v-deep(.el-statistic__prefix) {
}
</style>
